<template>
    <div class="tag_box">
        <tag-item v-for="(item,index) in tagsView" :key="item.name" :tagItem="item" :index="index" @removeTags="removeTags"></tag-item>
    </div>

</template>

<script>
    import TagItem from "@/components/tagsView/TagItem";
    export default {
        name:'TagBox',
        data() {
            return {
                // tagsView:[{title:"首页",path:"home"}]
            };
        },
        computed:{
            tagsView(){
                return this.$store.state.tagsView.tagsView
            }
        },
        methods:{
            removeTags(index){
                console.log("移除状态标签")
                //判断状态标签是否还剩下最后一个，最后一个就不移除
                if (this.tagsView.length>1) {
                    // 判断删除状态的path与当前路由的path是否相等，相等就将页面跳转到状态标签最后
                    if (this.tagsView[index].path == this.$route.path) {
                        this.$store.commit("removeTagsView",index)
                        this.$router.push(this.tagsView[this.tagsView.length - 1].path)
                    } else {
                        this.$store.commit("removeTagsView",index)
                    }
                }
            }
        },
        components:{
            TagItem
        },
    }
</script>
<style scoped>
    .tag_box{
        display: flex;
        height: 100%;
        align-items: center;
        box-sizing: border-box;
        /*box-shadow:  0px 2px 0px 0px rgba(0,0,0,.5);*/
        box-shadow:0 0 0px 2px rgba(0, 0, 0, 0.3);
        /*border-bottom:1px solid darkslategray;*/

    }
</style>
